import { useState } from 'react';
import axios from 'axios';
import { login } from './api/login';
import './index.css';

function App() {
  const [isLogin, setIsLogin] = useState(true);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loginSuccess, setLoginSuccess] = useState(false);

  const handleToggle = () => {
    setIsLogin(!isLogin);
  };

  // async/await是promise的语法糖
  const handleSubmit = async (event) => {
    event.preventDefault();
    if (isLogin) {
      console.log('登录信息', { email, password });
      // axios.get('/api/login', {
      //   params: {
      //     email,
      //     password
      //   }
      // }).then(res => {
      //   if (res.data.code !== 0) {
      //     setLoginSuccess(false);
      //     alert(res.data.msg);
      //     return;
      //   }
      //   alert('登录成功');
      //   setLoginSuccess(true);
      // }).catch(err => {
      //   console.error(err);
      // });
      // try {
        // const res = await axios.post('/abc/api/login', {
        //   email,
        //   password
        // });
        // if (res.data.code !== 0) {
        //   setLoginSuccess(false);
        //   alert(res.data.msg);
        //   return;
        // }
        // alert('登录成功');
        // setLoginSuccess(true);
      // } catch(err) {
      //   alert(err);
      // }
      // const res = await login({ email, password });
      // console.log('🚀 ~ res:', res);
      // if (res.code !== 0) {
      //   setLoginSuccess(false);
      //   alert(res.msg);
      //   return;
      // }
      await login({ email, password });
      alert('登录成功');
    } else {
      const res = await axios.post('/abc/abc/register', {
        email,
        password
      });
      if (res.data.code !== 0) {
        alert(res.data.msg);
        return;
      }
      alert('注册成功, 请登录');
      setIsLogin(true);
    }
  };

  return loginSuccess ? (
    <div>页面的内容</div>
  ) : (
    <div className="App">
      <h1>{isLogin ? '登录' : '注册'}</h1>
      <form onSubmit={handleSubmit}>
        <input
          placeholder="邮箱"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="密码"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">{isLogin ? '登录' : '注册'}</button>
      </form>
      <button onClick={handleToggle}>
        {isLogin ? '没有账号？注册' : '已有账号？登录'}
      </button>
    </div>
  );
}

export default App;
